import React, { Component } from "react";

class App extends Component {
  state = {
    count: 10,
    name: "zhangsan",
  };

  handleClick() {
    // console.log(this.state.count);
    // 在react里面，如果要改变数据，一定要使用setState方法
    // setState是异步的
    // setState可以接受两个参数，第一个参数是对象，第二个参数是回调函数
    // this.setState(
    //   {
    //     count: 20,
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
    // setState有第二种写法，两个参数
    // 第一个参数变成了函数,并且可以接受prevState作为参数
    // 第二个参数也是回调函数
    // this.setState(
    //   (prevState) => {
    //     return {
    //       count: prevState.count + 1,
    //     };
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );
    // 改变完以后的值，不依赖前一次的值，写对象更简单
    // 改变完以后的值，如果需要依赖前一次的值，写函数更安全
  }

  render() {
    return (
      <>
        <h2>改变state</h2>
        <p>
          {this.state.count} - {this.state.name}
        </p>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button>btn</button>
      </>
    );
  }

  componentDidMount() {
    // setTimeout(() => {
    //   this.setState({
    //     count: 20,
    //   });
    //   console.log(this.state.count);
    // }, 1000);

    document.querySelector("button").addEventListener("click", () => {
      this.setState({
        count: 20,
      });
      console.log(this.state.count);
    });
  }
}

// setState在合成事件里面是异步的
// setState在生命周期里面是异步的
// 在18版本之前，setState在定时器里面是同步的，18版本的时候，定时器也是异步的了
// 在18版本之前，setState在原生js事件里面是同步的，18版本的时候，原生js事件也是异步的了

export default App;
